<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻列表拼接</title>
    <style>
        table {
            border-collapse: collapse; /* 合并边框 */
        }

        th,
        td {
            border: 1px solid black; /* 添加边框 */
            padding: 8px; /* 添加内边距 */
        }
    </style>
</head>

<body>
    <table id="newsTable">
        <thead>
            <tr>
                <th>序号</th>
                <th>新闻标题</th>
                <th>新闻内容</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script>
        const newsList1 = [
            { title: '新闻 1', content: '新闻 1 内容' },
            { title: '新闻 2', content: '新闻 2 内容' }
        ];
        const newsList2 = [
            { title: '新闻 3', content: '新闻 3 内容' },
            { title: '新闻 4', content: '新闻 4 内容' }
        ];
        // 合并两个数组
        const combinedNewsList = [...newsList1,...newsList2];
        const tableBody = document.querySelector('#newsTable tbody');
        combinedNewsList.forEach((news, index) => {
            const row = document.createElement('tr');
            row.innerHTML = `<td>${index + 1}</td><td>${news.title}</td><td>${news.content}</td>`;
            tableBody.appendChild(row);
        });
    </script>
</body>

</html>